<template>
  <n-tooltip trigger="hover">
    <template #trigger>
      <n-switch :round="false"
                v-bind="$attrs"
                :rail-style="getRailStyle"
                checked-value="public"
                unchecked-value="private"
                default-value="private"
                v-model:value="curVisibility">
        <template #checked>
          公开
        </template>
        <template #unchecked>
          私有
        </template>
      </n-switch>
    </template>
    权限
  </n-tooltip>
</template>

<script setup lang="ts">

import {useVModel} from "@vueuse/core";

const props = defineProps({
  visibility: {
    type: String,
    default: 'private'
  }
})

const emit = defineEmits(['update:visibility'])

const curVisibility = useVModel(props, 'visibility', emit)

import {computed, CSSProperties} from 'vue';

const getRailStyle = computed(() => {
  return ({focused, checked}: { focused: boolean; checked: boolean }) => {
    const style: CSSProperties = {}
    if (checked) {
      style.background = '#2080f0'
      if (focused) {
        style.boxShadow = '0 0 0 2px #d0305040'
      }
    } else {
      style.background = '#d03050'
      if (focused) {
        style.boxShadow = '0 0 0 2px #d0305040'
      }
    }
    return style
  }
})

</script>

<style scoped>

</style>